@use 'z-index';

.GeoGebraFrame{
	/**
	 * According to the CSS2 specification, width will be the greater of
	 * this width property and the computed width...
	 */
	.geogebraweb-table-spreadsheet {
		table-layout: fixed;
		width: 0px;
		cursor: default;
		-ms-touch-action: none;
		empty-cells: show;
	}

	.geogebraweb-table-spreadsheet td {
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		overflow: hidden;
		padding: 2px 4px;
		white-space: nowrap;
		-ms-touch-action: none;
	}

	.geogebraweb-table-spreadsheet.off td {
		border-right: 0px;
		border-bottom: 0px;
	}

	.geogebraweb-table-spreadsheet.upperCorner {
		border-collapse: collapse;
	}

	.geogebraweb-table-spreadsheet.upperCorner td {
		background-color: #F8F8F8;
		color: #F8F8F8 !important;
	}
	
	.geogebraweb-table-spreadsheet td.SVCenterTD {
		overflow: hidden; /* for some reason, overflow:hidden only works well here */
	}
	
	.geogebraweb-table-spreadsheet td .SVCenterParent {
		position: relative; /* needed as frame of absolute positioning of content */
		overflow: visible; /* need overflow:hidden one level up */
		height: 100%; /* required to follow the size of TD */
		width: 100%; /* required to follow the size of TD */
		top: 0px; /* might be required to follow the size of TD - works! */
		left: 0px; /* might be required to follow the size of TD - works! */
	}
	
	.geogebraweb-table-spreadsheet td .SVCenterParent .SVCenterContent {
		/* this hack is pretty fixed, although its parents can change */
		position: absolute; /* needed for overflow to the left/top etc */
		margin: auto; /* center to the center of .SVCenterParent (hack) */
		top: -8192px; /* needed in case the image is bigger than the cell */
		left: -8192px; /* needed in case the image is bigger than the cell */
		bottom: -8192px; /* needed in case the image is bigger than the cell */
		right: -8192px; /* needed in case the image is bigger than the cell */
	}
	
	.geogebraweb-table-spreadsheet td.SVheader {
		padding-left: 0px;
		padding-right: 0px;
		text-align: center;
		background-color: #F8F8F8;
	}
	
	.geogebraweb-table-spreadsheet td.SVheader.selected {
		background-color: #CCCCFF;
		color: #333333;
		border-color: #999999;
	}
	
	.geogebraweb-table-spreadsheet-lowerLeftCorner {
		border-right: 1px solid #CCCCCC;
		padding: 0px 0px;
	}

	.geogebraweb-table-spreadsheet .checkboxPanel {
		.checkbox {
			width: 12px;
			height: 12px;

			.background {
				width:12px;
				height: 12px;
				top: 0;
				left: 0;
			}

			.checkmark {
				left: 1px;
				top: -4px;
				width: 10px;
				height: 10px;
			}

			.hoverBg{
				display: none;
			}
		}
	}
	
	.geogebraweb-popup-spreadsheet {
		z-index: z-index.$z-spreadsheet-popup;
	}
 
	.buttonSpreadsheet,.geogebraweb-select-spreadsheet {
		position: relative;
		z-index: z-index.$z-spreadsheet-button;
	}

	 .buttonSpreadsheet {
		text-align: center;
		width: 100%;
		height: 100%;
		padding: 0px !important;
		margin: 0px !important;
		.gwt-Label {
			text-align:center;
		}
	}

	.geogebraweb-select-spreadsheet {
		width: 100%;
	}
	
	.geogebraweb-selectionframe-spreadsheet {
		z-index: z-index.$z-spreadsheet-selection-frame;
		border-style: solid;
		border-width: 2px;
		border-color: var(--ggb-primary-color);
		-ms-touch-action: none; /* prevent scrolling on IE tablets */
	}

	.editorPanel {
		box-shadow: 0 2px 6px 2px rgb(60 64 67 / 15%);
	}

	.SpreadsheetEditorCell, .SpreadsheetEditorCell .fieldContainer {
		height: 100%;
	}

	.SpreadsheetEditorCell input[type="text"].gwt-SuggestBox {
		border-radius: 0;
		border-width: 0;
		height: 100%;
		&:focus {
			border: 2px var(--ggb-primary-color) solid;
		}
	}

	.SpreadsheetEditorCell .cursorOverlay {
		height: 100%;
		padding: 4px;
	}
	
	.SpreadsheetStyleBar td:last-child {
		width: 100%;
	}
	
	.SpreadsheetWrapView {
		background-color: #FFFFFF;
	}

	.spreadsheetDot {
		z-index: z-index.$z-spreadsheet-dot;
		borderTop: 1px solid white;
		borderLeft: 1px solid white;
		background-color: var(--ggb-primary-color);
	}
}